<html>
<head>
	<title>Two Player Snake</title>
	<link rel="stylesheet" type="text/css" href="styles.css">
	<meta charset="utf-8" />
</head>
<body onload="init()">
	<script type="text/javascript" src="levels.js"></script>
	<script type="text/javascript" src="snake.js"></script>

	<div id="boardWrapper">
		<script type="text/javascript">
			document.getElementById('boardWrapper').style['width'] = Math.min(window.innerWidth,window.innerHeight*800/500);
			document.getElementById('boardWrapper').style['height'] = Math.min(window.innerWidth*500/800,window.innerHeight);
		</script>

		<div id="background">
			<img src="Assets/background_images/background.png" width="100%" height="100%"/>
		</div>

		<div id="gameBoard"></div>

		<div id="gameinfo" class="infotext">
			<span id="snake1score">Snake 1 score</span>
			<span id="snake2score">Snake 2 score</span>
			<span id="gamespeed">Game speed: 0</span>
		</div>

		<div id="menuWrapper">
			<div id="menu">

				<div id="ordered_button" class="menu_button">
					<span class="menu_text">Ordered Levels</span>
				</div>

				<div id="random_button" class="menu_button">
					<span class="menu_text">Random Levels</span>
				</div>

				<div id="fixed_button" class="menu_button">
					<span class="menu_text">Fixed Level:</span>
					<span id="curlevel" class="menu_text"> 2 </span>
				</div>
				<div id="upLevel_button" class="button_arrow">
					<img src="Assets/menu_assets/upArrow.png" width="100%" height="100%"/>
				</div>
				<div id="downLevel_button" class="button_arrow">
					<img src="Assets/menu_assets/downArrow.png" width="100%" height="100%"/>
				</div>

				<div id="resume_button" class="menu_button">
					<span class="menu_text">Resume Game</span>
				</div>
			</div>
		</div>

	</div>
</body>
</html>